<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>订单报表</title>
		<link rel="stylesheet" type="text/css" href="../../../../../../../../../前端/demo/bangnuo/admin/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../../../../../../../../../前端/demo/bangnuo/admin/css/box-html.css" />
	</head>
	<body>
		<div class="layui-tab">
			<ul class="layui-tab-title">
				<li class="layui-this">日交易报表</li>
				<li>月交易报表</li>
				<li>商户日交易报表</li>
				<li>商户月交易报表</li>
				<li>代理商日交易报表</li>
				<li>代理商月交易报表</li>
			</ul>
			<div style="width: 100%; height: 100px; background: cornflowerblue;" id="summarytext">
			</div>
			<div class="layui-tab-content fill-empty">
				<!-- 日交易报表 -->
				<div class="layui-tab-item layui-show">
					<div style="width: 100%; height: 80px;">
						<form class="layui-form">
							<div>
								<div class="layui-form-item fill-up float-left">
									<label class="layui-form-label float-left">时间范围</label>
									<div class="layui-input-block float-left fill-empty">
										<input type="text" name=" stratTime" id="createTimeStart1" required lay-verify="required" placeholder="请选择"
										 autocomplete="off" class="layui-input">
									</div>
									<div class="fill-up-down float-left" style="font-size: -9px; font-weight: bold;">&ensp;~&ensp;</div>
									<div class="layui-input-block float-left fill-empty">
										<input type="text" name="enTime" id="createTimeEnd1" required lay-verify="required" placeholder="请选择"
										 autocomplete="off" class="layui-input">
									</div>
									<div class="float-left fill-up-down">
										<div class="float-left fill-left"><a class="mouse">昨日</a></div>
										<div class="float-left fill-left"><a class="mouse">前三天</a></div>
										<div class="float-left fill-left"><a class="mouse">前七天</a></div>
										<div class="float-left fill-left"><a class="mouse">当月</a></div>
										<div class="float-left fill-left"><a class="mouse">上月</a></div>
									</div>
								</div>
								<div class="float-left fill-up-down fill-left-right">
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn" lay-submit lay-filter="formDemo1">立即提交</button>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div style="width: 100%; height: 688px;">
						<div class="layui-tab">
							<ul class="layui-tab-title">
								<li class="layui-this">总计</li>
								<li>支付宝</li>
								<li>微信</li>
								<!-- <li>翼支付</li>
								<li>云闪付</li> -->
							</ul>
							<div class="layui-tab-content">
								<!-- 总计 -->
								<div class="layui-tab-item layui-show">
									<table id="sunmmary1" lay-filter="summerytoolbar1"></table>
								</div>
								<!-- 支付宝 -->
								<div class="layui-tab-item">
									<table id="sunmmary2" lay-filter="summerytoolbar2"></table>
								</div>
								<!-- 微信 -->
								<div class="layui-tab-item">
									<table id="sunmmary3" lay-filter="summerytoolbar3"></table>
								</div>
								<!-- 翼支付 -->
								<!-- <div class="layui-tab-item">内容4</div> -->
								<!-- 云闪付 -->
								<!-- <div class="layui-tab-item">内容5</div> -->
							</div>
						</div>
					</div>
				</div>

				<!-- 月交易报表 -->
				<div class="layui-tab-item layui-show">
					<div style="width: 100%; height: 80px;">
						<form class="layui-form">
							<div>
								<div class="layui-form-item fill-up float-left">
									<label class="layui-form-label float-left">时间范围</label>
									<div class="layui-input-block float-left fill-empty">
										<input type="text" name="startTime" id="createTimeStart2" required lay-verify="required" placeholder="请选择"
										 autocomplete="off" class="layui-input">
									</div>
									<div class="fill-up-down float-left" style="font-size: -9px; font-weight: bold;">&ensp;~&ensp;</div>
									<div class="layui-input-block float-left fill-empty">
										<input type="text" name="endTime" id="createTimeEnd2" required lay-verify="required" placeholder="请选择"
										 autocomplete="off" class="layui-input">
									</div>
									<div class="float-left fill-up-down">
										<div class="float-left fill-left"><a class="mouse">当月</a></div>
										<div class="float-left fill-left"><a class="mouse">上月</a></div>
									</div>
								</div>
								<div class="float-left fill-up-down fill-left-right">
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div style="width: 100%; height: 688px;">
						<div class="layui-tab">
							<ul class="layui-tab-title">
								<li class="layui-this">总计</li>
								<li>支付宝</li>
								<li>微信</li>
								<!-- <li>翼支付</li>
								<li>云闪付</li> -->
							</ul>
							<div class="layui-tab-content">
								<!-- 总计 -->
								<div class="layui-tab-item layui-show">
									<table id="sunmmary4" lay-filter="summerytoolbar4"></table>
								</div>
								<!-- 支付宝 -->
								<div class="layui-tab-item">
									<table id="sunmmary5" lay-filter="summerytoolbar5"></table>
								</div>
								<!-- 微信 -->
								<div class="layui-tab-item">
									<table id="sunmmary6" lay-filter="summerytoolbar6"></table>
								</div>
								<!-- 翼支付 -->
								<!-- <div class="layui-tab-item">内容4</div> -->
								<!-- 云闪付 -->
								<!-- <div class="layui-tab-item">内容5</div> -->
							</div>
						</div>
					</div>
				</div>


				<!-- 商户日交易报表 -->
				<div class="layui-tab-item">
					<form class="layui-form">
						<div>
							<div class="layui-form-item fill-up float-left">
								<label class="layui-form-label float-left">时间范围</label>
								<div class="layui-input-block float-left fill-empty">
									<input type="text" name="startTime" id="createTimeStart3" required lay-verify="required" placeholder="请选择"
									 autocomplete="off" class="layui-input">
								</div>
								<div class="fill-up-down float-left" style="font-size: -9px; font-weight: bold;">&ensp;~&ensp;</div>
								<div class="layui-input-block float-left fill-empty">
									<input type="text" name="endTime" id="createTimeEnd3" required lay-verify="required" placeholder="请选择"
									 autocomplete="off" class="layui-input">
								</div>
								<div class="float-left fill-up-down">
									<div class="float-left fill-left"><a class="mouse">昨日</a></div>
									<div class="float-left fill-left"><a class="mouse">前三天</a></div>
									<div class="float-left fill-left"><a class="mouse">前七天</a></div>
									<div class="float-left fill-left"><a class="mouse">当月</a></div>
									<div class="float-left fill-left"><a class="mouse">上月</a></div>
								</div>
							</div>
							<div class="float-left fill-up-down">
								<div class="layui-form-item">
									<label class="layui-form-label">商户</label>
									<div class="layui-input-block">
										<select name="city" lay-verify="required">
											<option value=""></option>
										</select>
									</div>
								</div>
							</div>
							<div class="float-left fill-up-down fill-left-right">
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
									</div>
								</div>
							</div>
						</div>
					</form>
					<iframe src="merchants/day/index.html" style="width: 100%; height: 688px;"></iframe>
				</div>
				<!-- 商户月交易报表 -->
				<div class="layui-tab-item">
					<form class="layui-form">
						<div>
							<div class="layui-form-item fill-up float-left">
								<label class="layui-form-label float-left">时间范围</label>
								<div class="layui-input-block float-left fill-empty">
									<input type="text" name="startTime" id="createTimeStart4" required lay-verify="required" placeholder="请选择"
									 autocomplete="off" class="layui-input">
								</div>
								<div class="fill-up-down float-left" style="font-size: -9px; font-weight: bold;">&ensp;~&ensp;</div>
								<div class="layui-input-block float-left fill-empty">
									<input type="text" name="endTime" id="createTimeEnd4" required lay-verify="required" placeholder="请选择"
									 autocomplete="off" class="layui-input">
								</div>
								<div class="float-left fill-up-down">
									<div class="float-left fill-left"><a class="mouse">当月</a></div>
									<div class="float-left fill-left"><a class="mouse">上月</a></div>
								</div>
							</div>
							<div class="float-left fill-up-down">
								<div class="layui-form-item">
									<label class="layui-form-label">商户</label>
									<div class="layui-input-block">
										<select name="city" lay-verify="required">
											<option value=""></option>
										</select>
									</div>
								</div>
							</div>
							<div class="float-left fill-up-down fill-left-right">
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
									</div>
								</div>
							</div>
						</div>
					</form>
					<iframe src="merchants/month/index.html" style="width: 100%; height: 688px;"></iframe>
				</div>
				<!-- 代理商日交易报表 -->
				<div class="layui-tab-item">
					<form class="layui-form">
						<div>
							<div class="layui-form-item fill-up float-left">
								<label class="layui-form-label float-left">时间范围</label>
								<div class="layui-input-block float-left fill-empty">
									<input type="text" name="startTime" id="createTimeStart5" required lay-verify="required" placeholder="请选择"
									 autocomplete="off" class="layui-input">
								</div>
								<div class="fill-up-down float-left" style="font-size: -9px; font-weight: bold;">&ensp;~&ensp;</div>
								<div class="layui-input-block float-left fill-empty">
									<input type="text" name="endTime" id="createTimeEnd5" required lay-verify="required" placeholder="请选择"
									 autocomplete="off" class="layui-input">
								</div>
								<div class="float-left fill-up-down">
									<div class="float-left fill-left"><a class="mouse">昨日</a></div>
									<div class="float-left fill-left"><a class="mouse">前三天</a></div>
									<div class="float-left fill-left"><a class="mouse">前七天</a></div>
									<div class="float-left fill-left"><a class="mouse">当月</a></div>
									<div class="float-left fill-left"><a class="mouse">上月</a></div>
								</div>
							</div>
							<div class="float-left fill-up-down">
								<div class="layui-form-item">
									<label class="layui-form-label">代理商</label>
									<div class="layui-input-block">
										<select name="city" lay-verify="required">
											<option value=""></option>
										</select>
									</div>
								</div>
							</div>
							<div class="float-left fill-up-down fill-left-right">
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
									</div>
								</div>
							</div>
						</div>
					</form>
					<iframe src="agent/day/index.html" style="width: 100%; height: 688px;"></iframe>
				</div>
				<!-- 代理商月交易报表 -->
				<div class="layui-tab-item">
					<form class="layui-form">
						<div>
							<div class="layui-form-item fill-up float-left">
								<label class="layui-form-label float-left">时间范围</label>
								<div class="layui-input-block float-left fill-empty">
									<input type="text" name="startTime" id="createTimeStart6" required lay-verify="required" placeholder="请选择"
									 autocomplete="off" class="layui-input">
								</div>
								<div class="fill-up-down float-left" style="font-size: -9px; font-weight: bold;">&ensp;~&ensp;</div>
								<div class="layui-input-block float-left fill-empty">
									<input type="text" name="endTime" id="createTimeEnd6" required lay-verify="required" placeholder="请选择"
									 autocomplete="off" class="layui-input">
								</div>
								<div class="float-left fill-up-down">
									<div class="float-left fill-left"><a class="mouse">当月</a></div>
									<div class="float-left fill-left"><a class="mouse">上月</a></div>
								</div>
							</div>
							<div class="float-left fill-up-down">
								<div class="layui-form-item">
									<label class="layui-form-label">代理商</label>
									<div class="layui-input-block">
										<select name="city" lay-verify="required">
											<option value=""></option>
										</select>
									</div>
								</div>
							</div>
							<div class="float-left fill-up-down fill-left-right">
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
									</div>
								</div>
							</div>
						</div>
					</form>
					<iframe src="agent/month/index.html" style="width: 100%; height: 688px;"></iframe>
				</div>
			</div>
		</div>
	</body>
	<script src="../../../../../../../../../前端/demo/bangnuo/admin/layui/layui.js"></script>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
	</script>
	<script>
		//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
		layui.use(['element', 'table', 'laydate'], function() {
			var element = layui.element,
				table = layui.table,
				laydate = layui.laydate,
				form = layui.form;

			/* 该账户 */
			//日
			laydate.render({
				elem: '#createTimeEnd1',
				type: 'datetime' //默认，可不填
			})
			laydate.render({
				elem: '#createTimeStart1',
				type: 'datetime' //默认，可不填
			})
			//月
			laydate.render({
				elem: '#createTimeEnd2',
				type: 'month' //默认，可不填
			})
			laydate.render({
				elem: '#createTimeStart2',
				type: 'month' //默认，可不填
			})
			/* 商户 */
			//日
			laydate.render({
				elem: '#createTimeEnd3',
				type: 'datetime' //默认，可不填
			})
			laydate.render({
				elem: '#createTimeStart3',
				type: 'datetime' //默认，可不填
			})
			//月
			laydate.render({
				elem: '#createTimeEnd4',
				type: 'month' //默认，可不填
			})
			laydate.render({
				elem: '#createTimeStart4',
				type: 'month' //默认，可不填
			})
			/* 代理 */
			//日
			laydate.render({
				elem: '#createTimeEnd5',
				type: 'datetime' //默认，可不填
			})
			laydate.render({
				elem: '#createTimeStart5',
				type: 'datetime' //默认，可不填
			})
			//月
			laydate.render({
				elem: '#createTimeEnd6',
				type: 'month' //默认，可不填
			})
			laydate.render({
				elem: '#createTimeStart6',
				type: 'month' //默认，可不填
			})



			//第一个实例
			table.render({
				elem: '#sunmmary1',
				url: '/demo/table/user/' //数据接口
					,
				page: true //开启分页
					,
				cols: [
					[ //表头
						{
							field: 'id',
							title: '编号',
							width: 120,
							sort: true,
							fixed: 'left'
						}, {
							field: 'username',
							title: '日期',
							width: 200
						}, {
							field: 'sex',
							title: '订单数',
							width: 100,
							sort: true
						}, {
							field: 'city',
							title: '订单金额',
							width: 150
						}, {
							field: 'sign',
							title: '退款笔数',
							width: 120,
							sort: true
						}, {
							field: 'experience',
							title: '退款金额',
							width: 150
						}, {
							field: 'score',
							title: '实收手续费',
							width: 120,
							sort: true
						}, {
							field: 'classify',
							title: '结算金额',
							width: 120
						}, {
							field: '',
							title: '操作',
							toolbar: '#barDemo'
						}
					]
				]
			});
			//监听工具条 
			table.on('tool(summerytoolbar1)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //查看
					//do somehing
				}
			});

			/* 支付宝 */
			//第二个实例
			table.render({
				elem: '#sunmmary2',
				url: '/demo/table/user/' //数据接口
					,
				page: true //开启分页
					,
				cols: [
					[ //表头
						{
							field: 'id',
							title: '编号',
							width: 120,
							sort: true,
							fixed: 'left'
						}, {
							field: 'username',
							title: '日期',
							width: 200
						}, {
							field: 'sex',
							title: '订单数',
							width: 100,
							sort: true
						}, {
							field: 'city',
							title: '订单金额',
							width: 150
						}, {
							field: 'sign',
							title: '退款笔数',
							width: 120,
							sort: true
						}, {
							field: 'experience',
							title: '退款金额',
							width: 150
						}, {
							field: 'score',
							title: '实收手续费',
							width: 120,
							sort: true
						}, {
							field: 'classify',
							title: '结算金额',
							width: 120
						}, {
							field: '',
							title: '操作',
							toolbar: '#barDemo'
						}
					]
				]
			});
			//监听工具条 
			table.on('tool(summerytoolbar2)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //查看
					//do somehing
				}
			});

			/* 微信 */
			//第三个实例
			table.render({
				elem: '#sunmmary3',
				url: '/demo/table/user/' //数据接口
					,
				page: true //开启分页
					,
				cols: [
					[ //表头
						{
							field: 'id',
							title: '编号',
							width: 120,
							sort: true,
							fixed: 'left'
						}, {
							field: 'username',
							title: '日期',
							width: 200
						}, {
							field: 'sex',
							title: '订单数',
							width: 100,
							sort: true
						}, {
							field: 'city',
							title: '订单金额',
							width: 150
						}, {
							field: 'sign',
							title: '退款笔数',
							width: 120,
							sort: true
						}, {
							field: 'experience',
							title: '退款金额',
							width: 150
						}, {
							field: 'score',
							title: '实收手续费',
							width: 120,
							sort: true
						}, {
							field: 'classify',
							title: '结算金额',
							width: 120
						}, {
							field: '',
							title: '操作',
							toolbar: '#barDemo'
						}
					]
				]
			});
			//监听工具条 
			table.on('tool(summerytoolbar3)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //查看
					//do somehing
				}
			});
			
			
			
			//第一个实例
			table.render({
				elem: '#sunmmary4',
				url: '/demo/table/user/' //数据接口
					,
				page: true //开启分页
					,
				cols: [
					[ //表头
						{
							field: 'id',
							title: '编号',
							width: 120,
							sort: true,
							fixed: 'left'
						}, {
							field: 'username',
							title: '日期',
							width: 200
						}, {
							field: 'sex',
							title: '订单数',
							width: 100,
							sort: true
						}, {
							field: 'city',
							title: '订单金额',
							width: 150
						}, {
							field: 'sign',
							title: '退款笔数',
							width: 120,
							sort: true
						}, {
							field: 'experience',
							title: '退款金额',
							width: 150
						}, {
							field: 'score',
							title: '实收手续费',
							width: 120,
							sort: true
						}, {
							field: 'classify',
							title: '结算金额',
							width: 120
						}, {
							field: '',
							title: '操作',
							toolbar: '#barDemo'
						}
					]
				]
			});
			//监听工具条 
			table.on('tool(summerytoolbar4)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			
				if (layEvent === 'detail') { //查看
					//do somehing
				}
			});
			
			/* 支付宝 */
			//第二个实例
			table.render({
				elem: '#sunmmary5',
				url: '/demo/table/user/' //数据接口
					,
				page: true //开启分页
					,
				cols: [
					[ //表头
						{
							field: 'id',
							title: '编号',
							width: 120,
							sort: true,
							fixed: 'left'
						}, {
							field: 'username',
							title: '日期',
							width: 200
						}, {
							field: 'sex',
							title: '订单数',
							width: 100,
							sort: true
						}, {
							field: 'city',
							title: '订单金额',
							width: 150
						}, {
							field: 'sign',
							title: '退款笔数',
							width: 120,
							sort: true
						}, {
							field: 'experience',
							title: '退款金额',
							width: 150
						}, {
							field: 'score',
							title: '实收手续费',
							width: 120,
							sort: true
						}, {
							field: 'classify',
							title: '结算金额',
							width: 120
						}, {
							field: '',
							title: '操作',
							toolbar: '#barDemo'
						}
					]
				]
			});
			//监听工具条 
			table.on('tool(summerytoolbar5)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			
				if (layEvent === 'detail') { //查看
					//do somehing
				}
			});
			
			/* 微信 */
			//第三个实例
			table.render({
				elem: '#sunmmary6',
				url: '/demo/table/user/' //数据接口
					,
				page: true //开启分页
					,
				cols: [
					[ //表头
						{
							field: 'id',
							title: '编号',
							width: 120,
							sort: true,
							fixed: 'left'
						}, {
							field: 'username',
							title: '日期',
							width: 200
						}, {
							field: 'sex',
							title: '订单数',
							width: 100,
							sort: true
						}, {
							field: 'city',
							title: '订单金额',
							width: 150
						}, {
							field: 'sign',
							title: '退款笔数',
							width: 120,
							sort: true
						}, {
							field: 'experience',
							title: '退款金额',
							width: 150
						}, {
							field: 'score',
							title: '实收手续费',
							width: 120,
							sort: true
						}, {
							field: 'classify',
							title: '结算金额',
							width: 120
						}, {
							field: '',
							title: '操作',
							toolbar: '#barDemo'
						}
					]
				]
			});
			//监听工具条 
			table.on('tool(summerytoolbar6)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			
				if (layEvent === 'detail') { //查看
					//do somehing
				}
			});
			//…
		});
	</script>
</html>
